<template>
  <dv-border-box-8 style="padding-top: 10px">
    <dv-decoration-7 style="width:100%;height:30px;">能耗总览</dv-decoration-7>
    <el-row>
      <el-col :span="8">
        <div id="main1" style="width: 100%;height: 250px"></div>
      </el-col>
      <el-col :span="8">
        <div id="main2" style="width: 100%;height: 250px"></div>
      </el-col>
      <el-col :span="8">
        <div id="main3" style="width: 100%;height: 250px"></div>
      </el-col>
    </el-row>
  </dv-border-box-8>


</template>

<script>
import { productPowerReportByYear} from "@/api/dv/carbon";


export default {
  name: "Dashboard",
  mounted(){
    this.initEchart();
  },
  props: {
    yearData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return  {

    }
  },
  methods:{
    initEchart(){
      let totalPowerConsume = this.yearData.totalPowerConsume + this.yearData.totalOfficePowerConsume
      let totalWaterConsume = this.yearData.totalWaterConsume + this.yearData.totalOfficeWaterConsume
      let totalCarbonEmission = this.yearData.totalCarbonEmission
      let myChart1 = this.$echarts.init(document.getElementById('main1'),'dark');
      let myChart2 = this.$echarts.init(document.getElementById('main2'),'dark');
      let myChart3 = this.$echarts.init(document.getElementById('main3'),'dark');
      let option1 = {
        backgroundColor: '',
        // 工具提示
        // 系列
        series: [
          {
            // 名字
            name: 'Pressure',
            // 类型
            type: 'gauge', // gauge-仪表盘
            // 最大值
            max: totalPowerConsume + 100000,
            // 样式
            itemStyle: {
              color: '#FAC858'
            },
            axisLabel: {            // 刻度标签。
              show: false,             // 是否显示标签,默认 true。
            },
            pointer : {    //指针大小
              width : 2
            },
            // 进度条
            progress: {
              show: true
            },
            detail: {
              valueAnimation: true, // 是否开启标签的数字动画。
              formatter: '{value}', // 格式化函数或者字符串
              fontSize: 16,
              color: '#FAC858',
              offsetCenter: [0,"30%"]  // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
            },
            data: [
              {
                value: totalPowerConsume,
                name: '耗电量',
                title: {
                  offsetCenter: ['0%', '80%']
                },
              }
            ],
          }
        ]
      };
      let option2 = {
        backgroundColor: '',
        tooltip: {
          formatter: '{a} <br/>{b} : {c}Kg'
        },
        series: [
          {
            name: 'Pressure',
            max: totalWaterConsume +10000,
            type: 'gauge',
            itemStyle: {
              color: '#73fa58',
            },
            axisLabel: {            // 刻度标签。
              show: false,             // 是否显示标签,默认 true。
            },
            pointer : {    //指针大小
              width : 2
            },
            progress: {
              show: true
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}',
              fontSize: 16,
              color: '#73fa58',
              offsetCenter: [0,"30%"]
            },
            data: [
              {
                value: totalWaterConsume,
                name: '耗水量',
                title: {
                  offsetCenter: ['0%', '80%']
                },
              }
            ],
          }
        ]
      };
      let option3 = {
        backgroundColor: '',
        tooltip: {
          formatter: '{a} <br/>{b} : {c}Kg'
        },
        series: [
          {
            name: 'Pressure',
            type: 'gauge',
            max: totalCarbonEmission + 1000000,
            itemStyle: {
              color: '#5878fa'
            },
            axisLabel: {            // 刻度标签。
              show: false,             // 是否显示标签,默认 true。
            },
            pointer : {    //指针大小
              width : 2
            },
            progress: {
              show: true
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}',
              fontSize: 16,
              color: '#5878fa',
              offsetCenter: [0,"30%"]
            },
            data: [
              {
                value: totalCarbonEmission,
                name: '碳排放量',
                title: {
                  offsetCenter: ['0%', '80%']
                },
              }
            ],
          }
        ]
      };
      option1 && myChart1.setOption(option1);
      option2 && myChart2.setOption(option2);
      option3 && myChart3.setOption(option3);

    },
  }
}
</script>

<style scoped>

</style>
